<template>

  <a-card :bordered="false">
    <div>
      <a-row>
        <a-col :span="12">
          商品名称：<a-input style="width: 200px" v-model="supplierName" placeholder="請輸入供應商名字"/>
          <a-button type="primary" style="margin-right: 20px" @click="queryList()">查询</a-button>
          <br/>
          <a-button type="primary" style="margin-right: 20px">修改</a-button>
          <a-button type="primary" style="margin-right: 20px">添加</a-button>
          <a-button type="primary" style="margin-right: 20px" @click="deleteById()">刪除</a-button>
        </a-col>
      </a-row>
      <br/>
      <a-row>
        <a-col :span="20">
          <a-table :columns="columns" :data-source="data" bordered :pagination="false"/>
        </a-col>
      </a-row>
      <br/>
      <a-row>
        <a-col :span="24">
          <a-pagination v-model:current="current" :total="total" :page-size="rows" @change="changeCurrent(current)" show-less-items />
        </a-col>
      </a-row>
    </div>
  </a-card>

</template>
<script >
  //定义引入的js插件（文件），@表示根路径，也就是src
  import {getAction} from "../../../api/manage"
  import {axios} from "../../../utils/request"

  export default {
    data() {
      return {
        //定义组件中关联属性
        // current:3,
        //用于指定表格标题列
        current: 1,
        page:1,
        total:undefined,
        rows:5,
        supplierName:"",
        columns:[
          // {
          //   dataIndex: 'name',//指定当前列关联的数据对象的属性名
          //   key: 'name',//唯一标识名，一般都是直接保持和dataIndex一致，可以省略
          //   title: '',//设置列名
          // },
          {
            dataIndex: 'supplierId',//指定当前列关联的数据对象的属性名

            title: '编号',//设置列名
          },
          {
            title: '公司名称',
            dataIndex: 'supplierName',

          },
          {
            title: '姓名',
            dataIndex: 'contacts',

          },
          {
            title: '聯繫方式',
            dataIndex: 'phoneNumber',

          },
          {
            title: '地址',
            dataIndex: 'address',

          },
          {
            title: '產品',
            dataIndex: 'remarks',

          },
        ],
        data:[],

      }

    },

    methods: {
      //定义组件事件关联方法
      selectPage(){
        axios({
          method: 'get',
          url: 'http://localhost:8080/jxc/supplier/getAllList',
          //data: {},
          params: {
            page:this.page,
            rows:this.rows,
          }
        }).then((response)=> {
          console.log(1);
          this.data=response.records;
          this.total=response.total;
          console.log(data)
          console.log(2);
        }).catch((error) => {

        });
      },
      queryList(){
        axios({
          method: 'get',
          url: 'http://localhost:8080/jxc/supplier/list',
          //data: {},
          params: {
            page:this.page,
            rows:this.rows,
            supplierName:this.supplierName,
          }
        }).then((response)=> {
          this.data=response.records;
          this.total=response.total;

        }).catch((error) => {

        });
      },
      deleteById(){
        axios({
          method: 'get',
          url: 'http://localhost:8080/jxc/supplier/delete',
          //data: {},
          params: {
            id:this.id,
          }
        }).then((response)=> {
          this.data=response;

        }).catch((error) => {

        });
      },
      changeCurrent(current){
        this.page=current;
        this.selectPage();
      }
    },
    created() {//页面加载前执行的操作
      this.selectPage();
    },
  }
</script>
